<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- stylesheet -->
    <link href="__PUBLIC__/css/live.css" rel="stylesheet">
    <link href="__PUBLIC__/css/owner.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <!-- scripts -->
    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="__PUBLIC__/js/jquery.ellipsis.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.17.1/locale/zh-cn.js"></script>
    <script src="__PUBLIC__/js/bootstrap-datetimepicker.min.js"></script>
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="build/css/ie7fix.css">
    <script src="js/ie7.js"></script>
    <![endif]-->
    <style type="text/css">

        .title {
            line-height: 60px;
            height: 60px;
            padding-left: 20px;
            color: #616366;
            background: #eee
        }

        .controls {
            padding: 15px 20px;
            height: 65px;
            border-bottom: 1px solid #dcdcdc
        }

        .controls .date-choose {
            float: left;
            padding-left: 50px
        }

        .controls .date-choose .date-item {
            display: inline-block;
            width: 160px
        }

        .controls .date-choose .date-text {
            position: relative;
            top: -12px;
            padding: 0 5px
        }

        .controls .search {
            width: 300px;
            border: 1px solid #dcdcdc;
            border-radius: 4px;
            float: right
        }

        .controls .search .search-inner {
            width: 144px;
            float: left;
            line-height: 33px;
            padding-left: 6px;
            height: 33px
        }

        .controls .search .search-icon {
            display: table;
            float: right;
            width: 50px;
            height: 35px;
            background: #9c9c9c;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            margin-top: -1px;
            cursor: pointer
        }

        .controls .search .search-icon i {
            display: table-cell;
            vertical-align: middle;
            margin: 0 auto;
            background: url("__PUBLIC__/img/search.png") no-repeat center center;
            width: 20px;
            height: 20px
        }

        .page {
            text-align: center;
            position: absolute;
            bottom: 60px;
            width: 100%
        }

        .content {
            min-height: 520px;
            padding: 30px 60px;
            width: 840px
        }

        .content .item {
            float: left;
            width: 200px;
            height: 220px;
            border: 1px solid #dcdcdc;
            margin-right: 40px;
            margin-bottom: 20px;
            padding: 10px 15px 20px 15px;
            position: relative;
            cursor: pointer
        }

        .content .item.active .hover {
            display: block
        }

        .content .header-title {
            /*border-bottom: 1px solid #dcdcdc*/
            position: absolute;
            bottom: 10px;
        }

        .content .img {
            padding-top: 8px;
            width: 168px;
            height: 102px;
            overflow: hidden;
            position: absolute;
            top: 55px;
        }

        .content .img img {
            display: block
        }

        .content .content-title {
            /*margin-top: 18px;*/
            font-size: 16px;
            line-height: 22px;
        }

        .content .hover {
            display: none;
            background: url("__PUBLIC__/img/hover-bg.png") no-repeat center center;
            width: 200px;
            height: 220px;
            z-index: 12000;
            position: absolute;
            left: 0;
            top: 0
        }

        .footer {
            height: 60px;
            line-height: 60px;
            background: #eee;
            text-align: center;
            position: absolute;
            bottom: 0;
            width: 100%
        }

        .footer .bttn {
            display: inline-block;
            width: 120px;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            color: #616366;
            background: #fff;
            margin: 0 20px
        }

        .footer .bttn-primary {
            color: #fff;
            background: #53a5eb
        }

        .footer .bttn-primary:hover {
            background: #4f9ddf
        }

        .footer .bttn-default {
            border: 1px solid #dcdcdc
        }

        .footer .bttn-default:hover {
            background: #fbfbfb
        }
        
    </style>
</head>
<body style="overflow: hidden">

<div class="controls">
    <form id="search-form" action="{:U('getIssueLive')}"> 
    <input type="hidden" name="spec_id" value="{$Think.get.spec_id}" />
    <div class="date-choose">
        <div class="date-item">
            <div class='input-group date' id='datetimepicker3'>
                <input type='text' class="form-control" name="s_time" value="{$Think.get.s_time}" />
                    <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
            </div>
        </div>
        <span class="date-text">至</span>
        <div class="date-item">
            <div class='input-group date' id='datetimepicker4'>
                <input type='text' class="form-control" name="e_time" value="{$Think.get.e_time}" />
                    <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
            </div>
        </div>
    </div>
    <div class="search">
        <input type="text" class="search-inner" name="title" value="{$Think.get.title}">
        <div class="search-icon" id="search-btn">
            <i></i>
        </div>
    </div>
    </form>
</div>
<ul class="content">
    <volist name="liveList" id="val">
    <li class="item <?php if($val['is_add']) { ?>active<?php } ?>" data-groupid="{$val.group_id}">
        <div class="content-title">
            {$val.title}
        </div>
        <div class="img">
            <img src="{$val.image_url|default='http://jianwei.appwuhan.net/Public/images/defaultpic.gif'}" width="100%" alt="">
        </div>
        <div class="header-title">
            <div class="time">{$val.start_time|date="Y-m-d H:i",###}</div>
            <div class="name">{$val.realname}</div>
            <div class="clr"></div>
        </div>
        <div class="hover"></div>
    </li>
    </volist>
</ul>
<div class="page">
    <div id="test" class="pagers">
        {$showpage}
    </div>
</div>
<div class="footer">
    <a href="javascript:;" class="bttn bttn-primary submit">确定</a>
    <a href="javascript:;" class="bttn bttn-default cancel">取消</a>
</div>

<script type="text/javascript">
    $(function () {
        $(".content-title").ellipsis({
            row: 2
        });
    })

    $('.submit').on('click', function () {
        var gids = [];
        var specid = "{$Think.get.spec_id}";
        $('li.new').each(function () {
            gids.push($(this).data('groupid'));
        });

        if(gids) {
            gids = gids.join(',');

            $.post('{:U("addIssueLive")}', {gids:gids,specid:specid}, function (data) {
                var data = $.parseJSON(data);
                if(data.status == 1) {
                    parent.document.getElementById("alert-msg").innerHTML = data['msg'];
                    $(parent.parent.document.getElementsByClassName("live-modal")).removeClass("on");
                    $(parent.parent.document.getElementById("mask")).hide();
                    parent.parent.window.location.href = '{:U("details")}?id={$Think.get.spec_id}';
                } else {
                    parent.document.getElementById("alert-msg").innerHTML = data['msg'];
                }
                alert(data['msg']);
            })

        } else {
            alert('请选添加的直播');
        }
    });

    $(".cancel").on("click",function(){
        $(parent.parent.document.getElementsByClassName("live-modal")).removeClass("on");
        $(parent.parent.document.getElementById("mask")).hide();
    });

    // 模态框

    $(document).on("click",".item",function () {
        $(this).toggleClass("active new");
    });

    // 模态框里面的时间控件
    $('#datetimepicker3').datetimepicker({
        format: "YYYY-MM-DD"
    });
    $('#datetimepicker4').datetimepicker({
        format: "YYYY-MM-DD",
        useCurrent: false //Important! See issue #1075
    });

    $("#datetimepicker3").on("dp.change", function (e) {
        $('#datetimepicker4').data("DateTimePicker").minDate(e.date);
    });
    $("#datetimepicker4").on("dp.change", function (e) {
        $('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
    });


    //取消编辑
    $("#mask,.cancel").click(function () {
        $("#mask").hide();
    });

    // 时间控件
    $('#datetimepicker1').datetimepicker({
        format: "YYYY-MM-DD"
    });
    $('#datetimepicker2').datetimepicker({
        format: "YYYY-MM-DD",
        useCurrent: false //Important! See issue #1075
    });

    $("#datetimepicker1").on("dp.change", function (e) {
        $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
    });
    $("#datetimepicker2").on("dp.change", function (e) {
        $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
    });
    $('#search-btn').click(function () {
        $("#search-form").submit();
    });
</script>
</body>
</html>